<template>
  <div class="app-container">
    <div class="block">
      <el-row>
        <el-col :span="12" :offset="4">
          <el-form
            :model="formData"
            :rules="rules"
            ref="formData"
            label-width="120px"
            class="demo-formData"
          >
            <el-form-item label="店铺名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-autocomplete
                v-model="formData.address"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入地址"
                style="width: 100%"
                @select="addressSelect"
              ></el-autocomplete>
              <span>当前城市：{{ city.name }}</span>
            </el-form-item>

            <el-form-item label="联系电话" prop="phone">
              <el-input v-model.number="formData.phone" maxLength="11"></el-input>
            </el-form-item>
            <el-form-item label="店铺简介" prop="description">
              <el-input v-model="formData.description"></el-input>
            </el-form-item>
            <el-form-item label="店铺标语" prop="promotion_info">
              <el-input v-model="formData.promotion_info"></el-input>
            </el-form-item>
            <el-form-item label="店铺分类">
              <el-cascader
                :options="categoryOptions"
                v-model="selectedCategory"
                change-on-select
              ></el-cascader>
            </el-form-item>
            <el-form-item label="平台收取费率(%)" prop="description">
              <el-input type="number" v-model="formData.platform_rate"></el-input>
            </el-form-item>
            <el-form-item label="店铺特点" style="white-space: nowrap">
              <span>品牌保证</span>
              <el-switch on-text="" off-text="" v-model="formData.is_premium"></el-switch>
              <span>蜂鸟专送</span>
              <el-switch on-text="" off-text="" v-model="formData.deliveryMode"></el-switch>
              <span>新开店铺</span>
              <el-switch on-text="" off-text="" v-model="formData.news"></el-switch>
            </el-form-item>
            <el-form-item style="white-space: nowrap">
              <span>外卖保</span>
              <el-switch on-text="" off-text="" v-model="formData.bao"></el-switch>
              <span>准时达</span>
              <el-switch on-text="" off-text="" v-model="formData.zhun"></el-switch>
              <span>开发票</span>
              <el-switch on-text="" off-text="" v-model="formData.piao"></el-switch>
            </el-form-item>
            <el-form-item label="配送费" prop="float_delivery_fee">
              <el-input-number
                v-model="formData.float_delivery_fee"
                :min="0"
                :max="20"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="起送价" prop="float_minimum_order_amount">
              <el-input-number
                v-model="formData.float_minimum_order_amount"
                :min="0"
                :max="100"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="营业时间" style="white-space: nowrap">
              <el-time-select
                placeholder="起始时间"
                v-model="formData.startTime"
                :picker-options="{
                  start: '05:30',
                  step: '00:15',
                  end: '23:30',
                }"
              >
              </el-time-select>
              <el-time-select
                placeholder="结束时间"
                v-model="formData.endTime"
                :picker-options="{
                  start: '05:30',
                  step: '00:15',
                  end: '23:30',
                  minTime: formData.startTime,
                }"
              >
              </el-time-select>
            </el-form-item>

            <el-form-item label="上传店铺头像">
              <el-upload
                class="avatar-uploader"
                :action="fileMgrUrl"
                :headers="uploadHeaders"
                :show-file-list="false"
                :on-success="handleShopAvatarScucess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="formData.image_path" :src="formData.imagePath" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="上传营业执照">
              <el-upload
                class="avatar-uploader"
                :action="fileMgrUrl"
                :headers="uploadHeaders"
                :show-file-list="false"
                :on-success="handleBusinessAvatarScucess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="formData.business_license_image"
                  :src="formData.businessLicenseImage"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="上传餐饮服务许可证">
              <el-upload
                class="avatar-uploader"
                :action="fileMgrUrl"
                :headers="uploadHeaders"
                :show-file-list="false"
                :on-success="handleServiceAvatarScucess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="formData.catering_service_license_image"
                  :src="formData.cateringServiceLicenseImage"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="优惠活动">
              <el-select
                v-model="activityValue"
                @change="selectActivity"
                :placeholder="activityValue"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-table
              :data="activities"
              style="min-width: 600px; margin-bottom: 20px"
              align="cneter"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="icon_name" label="活动标题" align="cneter" width="120">
              </el-table-column>
              <el-table-column prop="name" label="活动名称" align="cneter" width="120">
              </el-table-column>
              <el-table-column prop="description" align="cneter" label="活动详情">
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button size="small" type="danger" @click="handleDelete(scope.$index)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form-item class="button_submit">
              <el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getApiUrl } from '@/utils/utils';
import { getToken } from '@/utils/auth';
import { cityGuess, searchplace } from '@/api/getData';
import { addShop, foodCategory } from '@/api/business/shop';

export default {
  data() {
    return {
      city: {},
      fileMgrUrl: getApiUrl() + '/file',
      uploadHeaders: {
        Authorization: '',
      },
      formData: {
        name: '', //店铺名称
        address: '', //地址
        latitude: '',
        longitude: '',
        description: '', //介绍
        phone: '',
        promotion_info: '',
        float_delivery_fee: 5, //运费
        float_minimum_order_amount: 20, //起价
        is_premium: true,
        deliveryMode: true,
        news: true,
        bao: true,
        zhun: true,
        piao: true,
        startTime: '',
        endTime: '',
        image_path: '',
        business_license_image: '',
        catering_service_license_image: '',
        platform_rate: '10',
      },
      rules: {
        name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入联系电话' },
          { type: 'number', message: '电话号码必须是数字' },
        ],
      },
      options: [
        {
          value: '满减优惠',
          label: '满减优惠',
        },
        {
          value: '优惠大酬宾',
          label: '优惠大酬宾',
        },
        {
          value: '新用户立减',
          label: '新用户立减',
        },
        {
          value: '进店领券',
          label: '进店领券',
        },
      ],
      activityValue: '满减优惠',
      activities: [
        {
          icon_name: '减',
          name: '满减优惠',
          description: '满30减5，满60减8',
        },
      ],
      categoryOptions: [],
      selectedCategory: ['快餐便当', '简餐'],
    };
  },
  mounted() {
    this.initData();
    this.uploadHeaders['Authorization'] = getToken();
  },
  methods: {
    async initData() {
      try {
        const cityResponse = await cityGuess();
        this.city = cityResponse.data;
        const categoriesResponse = await foodCategory();
        const categories = categoriesResponse.data;
        categories.forEach((item) => {
          if (item.sub_categories.length) {
            const addnew = {
              value: item.name,
              label: item.name,
              children: [],
            };
            item.sub_categories.forEach((subitem, index) => {
              if (index === 0) {
                return;
              }
              addnew.children.push({
                value: subitem.name,
                label: subitem.name,
              });
            });
            this.categoryOptions.push(addnew);
          }
        });
      } catch (err) {
        console.log(err);
      }
    },
    async querySearchAsync(queryString, cb) {
      if (queryString) {
        try {
          const cityListResponse = await searchplace(this.city.id, queryString);
          const cityList = cityListResponse.data;
          if (cityList instanceof Array) {
            cityList.map((item) => {
              item.value = item.address;
              return item;
            });
            cb(cityList);
          }
        } catch (err) {
          console.log(err);
        }
      }
    },
    addressSelect(address) {
      this.formData.latitude = address.latitude;
      this.formData.longitude = address.longitude;
    },
    handleShopAvatarScucess(res) {
      this.formData.imagePath =
        getApiUrl() + '/file/getImgStream?fileName=' + res.data.realFileName;
      this.formData.image_path = res.data.realFileName;
    },
    handleBusinessAvatarScucess(res) {
      this.formData.business_license_image = res.data.realFileName;
      this.formData.businessLicenseImage =
        getApiUrl() + '/file/getImgStream?fileName=' + res.data.realFileName;
    },
    handleServiceAvatarScucess(res) {
      this.formData.catering_service_license_image = res.data.realFileName;
      this.formData.cateringServiceLicenseImage =
        getApiUrl() + '/file/getImgStream?fileName=' + res.data.realFileName;
    },
    beforeAvatarUpload(file) {
      const isRightType = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isRightType) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isRightType && isLt2M;
    },
    tableRowClassName(row, index) {
      if (index === 1) {
        return 'info-row';
      } else if (index === 3) {
        return 'positive-row';
      }
      return '';
    },
    selectActivity() {
      this.$prompt('请输入活动详情', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          if (value === null) {
            this.$message({
              type: 'info',
              message: '请输入活动详情',
            });
            return;
          }
          let newObj = {};
          switch (this.activityValue) {
            case '满减优惠':
              newObj = {
                icon_name: '减',
                name: '满减优惠',
                description: value,
              };
              break;
            case '优惠大酬宾':
              newObj = {
                icon_name: '特',
                name: '优惠大酬宾',
                description: value,
              };
              break;
            case '新用户立减':
              newObj = {
                icon_name: '新',
                name: '新用户立减',
                description: value,
              };
              break;
            case '进店领券':
              newObj = {
                icon_name: '领',
                name: '进店领券',
                description: value,
              };
              break;
          }
          this.activities.push(newObj);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          });
        });
    },
    handleDelete(index) {
      this.activities.splice(index, 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          Object.assign(
            this.formData,
            { activities: this.activities },
            {
              category: this.selectedCategory.join('/'),
            },
          );
          const activities = this.formData.activities;
          const activitiesJson = JSON.stringify(activities);
          delete this.formData.activities;
          this.formData.activitiesJson = activitiesJson;
          addShop(this.formData).then(() => {
            this.$message({
              type: 'success',
              message: '添加成功',
            });
            this.formData = {
              name: '', //店铺名称
              address: '', //地址
              latitude: '',
              longitude: '',
              description: '', //介绍
              phone: '',
              promotion_info: '',
              float_delivery_fee: 5, //运费
              float_minimum_order_amount: 20, //起价
              is_premium: true,
              deliveryMode: true,
              news: true,
              bao: true,
              zhun: true,
              piao: true,
              startTime: '',
              endTime: '',
              image_path: '',
              business_license_image: '',
              catering_service_license_image: '',
            };
            this.selectedCategory = ['快餐便当', '简餐'];
            this.activities = [
              {
                icon_name: '减',
                name: '满减优惠',
                description: '满30减5，满60减8',
              },
            ];
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '请检查输入是否正确',
            offset: 100,
          });
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.button_submit {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.el-table .info-row {
  background: #c9e5f5;
}

.el-table .positive-row {
  background: #e2f0e4;
}
</style>
